<template>
  <div>
    <div class="box-border p-12px">
      <div>
        <el-form label-width="100px" ref="formRef" :model="searchValue">
          <el-row>
            <el-col :span="12">
              <el-form-item label="文件名称" prop="fileName">
                <ns-input v-model="searchValue.fileName" clearable placeholder="请输入文件名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="归属系统" prop="sysId">
                <el-cascader
                  v-model="searchValue.sysId"
                  placeholder="请选择归属系统"
                  :props="systemCascaderProps"
                  :options="systemList"
                  filterable
                  clearable
              /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="归属机构" prop="deptId">
                <el-cascader
                  v-model="searchValue.deptId"
                  clearable
                  placeholder="请选择归属机构"
                  :options="options"
                  :props="cascaderProps"
                  filterable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="text-right">
              <el-button @click="search" type="primary">搜索</el-button>
              <el-button @click="searchReset" plain>重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <AsyncTable
          v-bind="tableInfo"
          ref="tableRef"
          :fetchData="fetchData"
          @selection-change="changeTable"
        />
      </div>
      <el-form ref="submitForm" :rules="rules" :model="form">
        <el-form-item label="数据保护标准" prop="template" class="mt-20px w-400px">
          <el-select v-model="form.template" clearable placeholder="请选择数据标准">
            <el-option
              v-for="(template, templateIndex) in templateList"
              :key="templateIndex"
              :label="template.dataStandardName"
              :value="template.id"
            /> </el-select
        ></el-form-item>
      </el-form>
    </div>
    <div>
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button @click="closeOutDrawer">关闭</el-button>
    </div>
  </div>
</template>
<script lang="tsx" setup>
import { getDataBaseList, assetExecClassification } from '@/api/assetList'
import { renderFinger } from '@/utils/commonRender'
import { getSimpleDeptList } from '@/api/system/dept'
import { getSimpleSystemList } from '@/api/asset/taskManage'
import { handleTree } from '@/utils/tree'
import { dataStandardsPage } from '@/api/dataStandards/standards/index'
const { proxy } = getCurrentInstance() as any
const message = useMessage() // 消息弹窗
const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  },
  closeOutDrawer: Function
})
const cascaderProps = ref({
  checkStrictly: true,
  label: 'name',
  value: 'id',
  children: 'children',
  emitPath: false
})
const systemCascaderProps = {
  checkStrictly: true,
  label: 'value',
  value: 'id',
  children: 'children',
  emitPath: false
}
const options = ref<Tree[]>([])
const systemList = ref([
  {
    id: 1,
    name: '系统1',
    children: [
      { id: 11, name: '子系统1' },
      { id: 12, name: '子系统2' },
      { id: 13, name: '子系统3' }
    ]
  }
])

const tableInfo = reactive({
  columns: [
    {
      label: '文件名称',
      prop: 'fileName'
    },
    {
      label: '文件指纹',
      render: renderFinger
    },
    {
      label: '归属机构',
      prop: 'deptName'
    },
    {
      label: '归属系统',
      prop: 'sysName'
    }
  ],
  data: []
})

const searchValue = ref({
  fileName: '',
  fileType: '',
  level: '',
  importance: '',
  sysId: '',
  deptId: '',
  isLevel: '',
  submitStatus: ''
})

const submitForm = ref()
const form = ref({
  template: null
})
const rules = {
  template: [{ required: true, message: '数据保护标准不能为空', trigger: 'change' }]
}

const tableRef = ref()
const formRef = ref()
const ids = ref<string[]>([])
const changeTable = (val) => {
  ids.value = []
  val.map((item) => {
    ids.value.push(item.id)
  })
}
const searchReset = () => {
  formRef.value.resetFields()
  tableRef.value.resetPage()
  tableRef.value.fetchData()
}
const search = () => {
  tableRef.value.resetPage()
  tableRef.value.fetchData()
}

const fetchData = async ({ page, pageSize }) => {
  const { data, count } = await getDataBaseList({
    page,
    pageSize,
    dataType: 'file',
    isSingle: true,
    ids: props.params.ids,
    ...searchValue.value
  })
  return { data, count }
}

const submit = async () => {
  submitForm.value.validate(async (valid) => {
    if (valid) {
      const formData = {
        ids: props.params.ids,
        template: form.value.template,
        objectType: 3
      }
      const res = await assetExecClassification(formData)
      if (res) {
        message.success('操作成功')
        props.params.callBack()
        props.closeOutDrawer()
      }
    }
  })
}

// 分类分级
const execClassification = () => {
  proxy?.$Drawer({
    title: '设计分级策略',
    component: import('@/views/asset/assetList/components/execClassification.vue'),
    size: '70%',
    params: {
      ids: props.params.ids,
      objectType: 3,
      callBack: () => {
        props.params.callBack()
        props.closeOutDrawer()
      }
    }
  })
}

const getSystemList = async () => {
  const data = await getSimpleSystemList({})
  systemList.value = handleTree(data, 'id', 'pid')
}
const getDeptList = async () => {
  const data = await getSimpleDeptList()
  options.value = data
}
// 数据标准
const templateList = ref([])
const getTemplateList = async () => {
  const { data } = await dataStandardsPage({ page: 1, pageSize: 999, type: 0, status: '1' })
  console.log('data', data)
  templateList.value = data
}
onMounted(() => {
  getSystemList()
  getDeptList()
  getTemplateList()
})
</script>

<style scoped lang="scss">
:deep(.el-table .el-form-item--default) {
  margin-bottom: 0 !important;
}
.sample-item {
  margin-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
}
</style>
